<%@page import="com.metacube.questionbank.model.Question"%>
<%@page import="com.metacube.questionbank.model.Answer"%>
<%@page import="com.metacube.questionbank.model.Tag"%>
<%@page import="com.metacube.questionbank.model.User"%>
<%@page import="java.util.List"%>
<%@page import="java.sql.*"%>


<%
	List<Answer> answers=(List<Answer>)request.getAttribute("answers"); 
Question question=(Question)request.getAttribute("question");
 List<Integer> upVotes=(List<Integer>)request.getAttribute("upvotes");
 List<Integer> downVotes=(List<Integer>)request.getAttribute("downVotes");
 List<Tag> tags = (List<Tag>) request.getAttribute("tags");
 Integer ansCount = (Integer) request.getAttribute("ansCount");
 List<User> user = (List<User>) request.getAttribute("user");
 User qUser=(User)request.getAttribute("qUser");
%>
<script type="text/javascript">
	function crunchifyAjax(ansId, userId, status) {
		$.ajax({
			url : 'p.json',
			datatype : 'json',
			data : {
				"answerId" : ansId,
				"userId" : userId,
				"upvoteStatus" : status
			},
			success : function(data) {

				$("#like" + ansId).html(data[0]);
				$("#dislike" + ansId).html(data[1]);
			}
		});
	}
</script>
<div class="container answers">
	<h4>Question</h4>
	<hr>
	<div class="question-summary clearfix">
		<div class="col-md-1 no_of_answers">
			<div class="count">
				<span title="answers"> 
					<%
 						out.print(ansCount);
 					%>
				</span>
			</div>
			<div>answers</div>
		</div>
		<div class="col-md-11">
			<h3>
				<a href="#" title="question"> 
					<%
 						out.print(question.getQuestionTitle());
 					%>
				</a>
			</h3>
			<p class="ques_desc">
				<%
					out.print(question.getQuestionDesc());
				%>
				<code> </code>
			</p>
			<div class="tags_posted clearfix">
				<div class="pull-left question_tags">
					<%
						for(int i=0;i<tags.size();i++){
					%>
					<a href="tag_questions.htm?id=<%=tags.get(i).getTagId()%>"> 
						<%
 							out.print(tags.get(i).getTagName());
 						%>
					</a>
					<%
						}
					%>
				</div>
				<div class="pull-right">
					<div>
					<span class="glyphicon glyphicon-time"></span>
					<a> <%
						Timestamp queTime=question.getQuestionDate();
						out.print(queTime.getDate()+"-"+(queTime.getMonth()+1)+"-"+(queTime.getYear()+1900) +" "+queTime.getHours()+":"+queTime.getMinutes());
						%>
					</a>
					</div>
					<div> 
					<a href="ReadByOthersprofile.htm?id=<%=qUser.getUser_id()%>">
						<%
							out.print(qUser.getName());
						%>
					</a>					
					<span>Rank: </span>
					 <span> <%
 							out.print(qUser.getRating());
						%>
					</span>
					</div>
				</div>
			</div>
		</div>
	</div>
	<section id="answerList">
		<h4>Answers</h4>
		<hr>
		<div id="answerLists" class="jplist clearfix">
			<div class="jplist-panel panel-top page-panel clearfix">
				<div class="jplist-label" data-type="Page {current} of {pages}"
					data-control-type="pagination-info" data-control-name="paging"
					data-control-action="paging">
				</div>
				<div class="jplist-pagination" data-control-type="pagination"
					data-control-name="paging" data-control-action="paging"
					data-items-per-page="5">
				</div>
			</div>
			<div class="list text-shadow clearfix">
				<%
					for(int ansCounter=0;ansCounter<answers.size();ansCounter++){
				%>
				<div class="list-item answer-summary clearfix">
					<div class="col-md-1 user_pic">
						<div
							style="width: 30px; height: 30px; margin-top: 45%; text-align: center;">
							<img style="width: 100%; height: 100%"
								src="getImageById.htm?id=<%=answers.get(ansCounter).getUserId()%>"
								alt="img">
						</div>
					</div>
					<div class="col-md-11 user_answer">
						<p class="ques_desc">
							<%
								out.print(answers.get(ansCounter).getAnswerDesc());
							%>
							<code> </code>
						</p>
					</div>
					<div class="user_likes">
						<div class="pull-left">							
							<%
								if(session.getAttribute("user")==null)
										{
											out.print("<span id='like'>");
											out.print("<a onclick=''#'><span class='glyphicon glyphicon-thumbs-up'></span></a>");
											out.print("<span class='no-of-likes'><label id='like'" + answers.get(ansCounter).getAnsId() +">"); 
											out.print(upVotes.get(ansCounter)); 
											out.print("</label></span>");
											out.print("</span>");
											out.print("<span id='dislike'><a href='#'>");
											out.print("<span class='glyphicon glyphicon-thumbs-down'></span></a>");
											out.print("<span class='no-of-dislikes'><label id='dislike'" +  answers.get(ansCounter).getAnsId() + ">");
											out.print(downVotes.get(ansCounter)); 
											out.print("</label>");
											out.print("</span>");
											out.print("</span>");
										}
										else
										{
											User user2=(User)session.getAttribute("user");
											out.print("<span id='like'>");
											out.print("<a onclick='crunchifyAjax(" + answers.get(ansCounter).getAnsId() +  "," +   user2.getUser_id()  +  "," + 1 +  ")'" + ">");
											out.print("<span class='glyphicon glyphicon-thumbs-up'></span></a>");
											out.print("<span class='no-of-likes'><label id='like" + answers.get(ansCounter).getAnsId() +"'>"); 
											out.print(upVotes.get(ansCounter)); 
											out.print("</label></span>");
											out.print("</span>");
											out.print("<span id='dislike'><a onclick=' +  crunchifyAjax(" +answers.get(ansCounter).getAnsId() +"," +  user2.getUser_id()  + ","  + -1 + ")'" + ">");
											out.print("<span class='glyphicon glyphicon-thumbs-down'></span></a>");
											out.print("<span class='no-of-dislikes'><label id='dislike" +  answers.get(ansCounter).getAnsId() + "'>");
											
											out.print(downVotes.get(ansCounter)); 
											out.print("</label>");
											out.print("</span>");
											out.print("</span>");

										}
							%>
						</div>
						<div class="pull-right">
							<span class="glyphicon glyphicon-time"></span> 
							<span
								class="posting_time"> <%
										Timestamp ansTime=answers.get(ansCounter).getAnswerDate();
 									out.print(ansTime.getDate()+"-"+(ansTime.getMonth()+1)+"-"+(ansTime.getYear()+1900) +" "+ansTime.getHours()+":"+ansTime.getMinutes());
 								%>
							</span>							
						</div>
					</div>
				</div>
				<%
					}
				%>
			</div>
			<div class="jplist-no-results no-result text-shadow align-center">
				<p>No results found</p>
			</div>
			<!-- panel -->
			<div class="jplist-panel panel-bottom clearfix">
				
				<div 
				   class="jplist-label" 
				   data-type="{start} - {end} of {all}"
				   data-control-type="pagination-info" 
				   data-control-name="paging" 
				   data-control-action="paging">
				</div>
				
				<div 
				   class="jplist-pagination" 
				   data-control-type="pagination" 
				   data-control-name="paging" 
				   data-control-action="paging"
				   data-items-per-page="5">
				</div>
				
			</div>
		</div>
	</section>
</div>

<div class="container post_panel">
	<div class="panel panel-default">
		<div class="panel-body">
			<div class="form-group">
				<button type="button" class="btn btn-info" id="post_answer">Post
					Answer</button>
			</div>
		</div>
	</div>
	<script>
		$(document).ready(function() {
			var image = document.getElementById('myImage');
			if (image != null) {
				$('#post_answer').click(function() {
					$('.submit_answer').slideToggle('slow');
				});
			} else {

			}
		});
	</script>
</div>

<script>
	$('document').ready(function() {

		$('#answerLists').jplist({
			itemsBox : '.list',
			itemPath : '.list-item',
			panelPath : '.jplist-panel'
		});
	});
</script>

<div class="container submit_answer">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h3 class="panel-title">Place your answer</h3>
		</div>
		<div class="panel-body">
			<form action="QuestionAnswer.htm?id=<%=question.getQuesId()%>"
				method="POST">
				<div class="form-group">
					<label for="title">Answer</label>
					<textarea class="form-control ckeditor" rows="15" id="description"
						name="description"></textarea>
				</div>
				<div class="form-group">
					<div class="btn-group">
						<button type="submit" class="btn btn-info">Post</button>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
